<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title id = "title">数字员工视频智能分析及数据管理平台</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="Access-Control-Allow-Origin" content="*">

<meta http-equiv="X-XSS-Protection" content="1; mode=block" />

<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">

<meta http-equiv="Content-Security-Policy" content="form-action 'self';">



<link rel="stylesheet" href="/layui/css/layui.css" media="all">

    
<style>
	html {
		height: 100%;
		background-image: -webkit-radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
		background-image: radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
		cursor: move;
	}

	/* body {
		width: 100%;
		margin: 0;
		overflow: hidden;
	} */

body {
	/* background-image: url(/images/bg.png); */
	background-image: url(/images/bg.jpeg);
    height: 100%;
    width: 100%;
    background-size: 100%;
}

#container {
	height: 100%;
	width: 100%
}

input:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 1000px #fff;
	background-color: transparent
}

.admin-login-background {
	width: 400px;
	height: 400px;
	position: absolute;
	left: 50%;
	top: 40%;
	margin-left: -150px;
	margin-top: -100px
}

.admin-forgotPassword-background {
	width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 35%;
	margin-left: -150px;
	margin-top: -100px
}

.admin-enterpriseRegister-background {
	width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 30%;
	margin-left: -150px;
	margin-top: -100px
}

.admin-userUnlockDiv-background{
	width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 40%;
	margin-left: -150px;
	margin-top: -100px
}



.admin-header {
	text-align: center;
	margin-bottom: 20px;
	color: #C8E8EB;
	font-weight: bold;
	font-size: 36px
}

.admin-input {
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	height: 50px;
	/*width: 280px;*/
	padding-bottom: 0px;
	border-radius: 10px 10px 10px 10px;
}

.admin-a {
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	height: 22px;
	width: 280px;
	padding-bottom: 0px;
	padding-top: 8px
}

.admin-input::-webkit-input-placeholder {
	color: #a78369
}

.layui-icon-username {
	color: #a78369 !important
}

.layui-icon-username:hover {
	color: #9dadce !important
}

.layui-icon-password {
	color: #a78369 !important
}

.layui-icon-password:hover {
	color: #9dadce !important
}

.layui-icon-cellphone {
	color: #a78369 !important
}

.layui-icon-cellphone:hover {
	color: #9dadce !important
}

.layui-icon-vercode {
	color: #a78369 !important
}

.layui-icon-vercode:hover {
	color: #9dadce !important
}

.admin-input-username {
	border-top-style: solid;
	border-radius: 10px 10px 10px 10px
}

.admin-input-verify {
	border-radius: 10px 10px 10px 10px
}

.admin-button {
	margin-top: 20px;
	font-weight: bold;
	font-size: 16px;
	width: 100%;
	height: 50px;
	border-radius: 5px;
	background-color: white;
	color: #213961;
	border: 1px solid #0e51d9;
	border-radius: 10px 10px 10px 10px;
	cursor: pointer;
}

.admin-icon {
	margin-left: 340px;
	margin-top: 10px;
	font-size: 30px
}

i {
	position: absolute
}

.admin-captcha {
	position: absolute;
	margin-left: 285px;
	margin-top: -45px
}

.admin-captcha-phone {
	position: absolute;
	margin-left: 185px;
	margin-top: -45px;
	cursor: pointer;
	background-color: #a78369;
	width: 90px;
	height: 40px
}
</style>
</head>
<body>
<!-- <canvas id="canv" width="1920" height="572"></canvas> -->
	<div id="container">
		<div class="admin-login-background" id="loginDiv">
			<input type="hidden" th:value="${projectname}" id="projectnameId" />
			<div class="admin-header">
				<!-- <img alt="" src="/favicon.ico" height="" width=""> -->
				<span id="projectnameSpan" style="font-size:1.4rem">加油站数字员工视频智能分析及数据管理平台</span>
			</div>
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title" style="display: none">
					<center>
						<li class="layui-this">密码登录</li>
					</center>
				</ul>
				
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<form class="layui-form" action="" id="loginForm">
							<div>
								<i class="layui-icon layui-icon-username admin-icon"></i> <input
									type="text" name="username" placeholder="请输入用户名"
									autocomplete="off"
									class="layui-input admin-input admin-input-username" value="">
							</div>
							<div style="margin-top: 20px">
								<i class="layui-icon layui-icon-password admin-icon"></i> <input
									type="password" name="password" placeholder="请输入密码"
									autocomplete="off" class="layui-input admin-input" value="">
							</div>
							<div style="margin-top: 20px">
								<input type="text" name="captcha" id="captcha" placeholder="请输入验证码"
									autocomplete="off"
									class="layui-input admin-input"> <img
									class="admin-captcha" width="90" height="40" src="/sys/getVerify">
								<img onClick="this.src=this.src+'?'+Math.random();" id="img"
									class="admin-captcha" width="90" height="40" src="/sys/getVerify">
							</div>
							<div class="layui-input admin-a admin-input-verify" style="display: none">
								<a id="forgotPassword" style="display: none;font-size: 11px; text-decoration: underline; float: left" href="javascript:void(0)">忘记密码</a>
								
								<a id="userUnlock" style="display: none;margin-left:5px; font-size: 11px; text-decoration: underline; float: left" href="javascript:void(0)">用户解锁</a>
							
								<a id="enterpriseRegister" style="display: none;font-size: 11px; text-decoration: underline; float: right;margin-right:6px;" href="javascript:void(0)">企业端注册</a>
							</div>
							
							<button class="admin-button" lay-submit lay-filter="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
						</form>
					
					</div>
				  	
				</div>
			</div>
			
		</div>
		

	</div>
	<script src="/layui/layui.js"></script>
	<script src="/js/jquery.min.js"></script>
 	<script type="text/javascript" src = "/js/security/aes.js"></script>
    <script type="text/javascript" src = "/js/security/pad-zeropadding.js"></script>
    <script type="text/javascript" src = "/js/security/security.js"></script>
	<script>
		$("#projectnameSpan").html($("#projectnameId").val());
		$("#title").html($("#projectnameId").val());
		
		var num = 200;
		var w = window.innerWidth;
		var h = window.innerHeight;
		var max = 100;
		var _x = 0;
		var _y = 0;
		var _z = 150;
		var dtr = function(d) {
			return d * Math.PI / 180;
		};

		var rnd = function() {
			return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
		};
		var dist = function(p1, p2, p3) {
			return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, 2));
		};

		var cam = {
			obj: {
				x: _x,
				y: _y,
				z: _z
			},
			dest: {
				x: 0,
				y: 0,
				z: 1
			},
			dist: {
				x: 0,
				y: 0,
				z: 200
			},
			ang: {
				cplane: 0,
				splane: 0,
				ctheta: 0,
				stheta: 0
			},
			zoom: 1,
			disp: {
				x: w / 2,
				y: h / 2,
				z: 0
			},
			upd: function() {
				cam.dist.x = cam.dest.x - cam.obj.x;
				cam.dist.y = cam.dest.y - cam.obj.y;
				cam.dist.z = cam.dest.z - cam.obj.z;
				cam.ang.cplane = -cam.dist.z / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
				cam.ang.splane = cam.dist.x / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z);
				cam.ang.ctheta = Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.z * cam.dist.z) / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
				cam.ang.stheta = -cam.dist.y / Math.sqrt(cam.dist.x * cam.dist.x + cam.dist.y * cam.dist.y + cam.dist.z * cam.dist.z);
			}
		};

		var trans = {
			parts: {
				sz: function(p, sz) {
					return {
						x: p.x * sz.x,
						y: p.y * sz.y,
						z: p.z * sz.z
					};
				},
				rot: {
					x: function(p, rot) {
						return {
							x: p.x,
							y: p.y * Math.cos(dtr(rot.x)) - p.z * Math.sin(dtr(rot.x)),
							z: p.y * Math.sin(dtr(rot.x)) + p.z * Math.cos(dtr(rot.x))
						};
					},
					y: function(p, rot) {
						return {
							x: p.x * Math.cos(dtr(rot.y)) + p.z * Math.sin(dtr(rot.y)),
							y: p.y,
							z: -p.x * Math.sin(dtr(rot.y)) + p.z * Math.cos(dtr(rot.y))
						};
					},
					z: function(p, rot) {
						return {
							x: p.x * Math.cos(dtr(rot.z)) - p.y * Math.sin(dtr(rot.z)),
							y: p.x * Math.sin(dtr(rot.z)) + p.y * Math.cos(dtr(rot.z)),
							z: p.z
						};
					}
				},
				pos: function(p, pos) {
					return {
						x: p.x + pos.x,
						y: p.y + pos.y,
						z: p.z + pos.z
					};
				}
			},
			pov: {
				plane: function(p) {
					return {
						x: p.x * cam.ang.cplane + p.z * cam.ang.splane,
						y: p.y,
						z: p.x * -cam.ang.splane + p.z * cam.ang.cplane
					};
				},
				theta: function(p) {
					return {
						x: p.x,
						y: p.y * cam.ang.ctheta - p.z * cam.ang.stheta,
						z: p.y * cam.ang.stheta + p.z * cam.ang.ctheta
					};
				},
				set: function(p) {
					return {
						x: p.x - cam.obj.x,
						y: p.y - cam.obj.y,
						z: p.z - cam.obj.z
					};
				}
			},
			persp: function(p) {
				return {
					x: p.x * cam.dist.z / p.z * cam.zoom,
					y: p.y * cam.dist.z / p.z * cam.zoom,
					z: p.z * cam.zoom,
					p: cam.dist.z / p.z
				};
			},
			disp: function(p, disp) {
				return {
					x: p.x + disp.x,
					y: -p.y + disp.y,
					z: p.z + disp.z,
					p: p.p
				};
			},
			steps: function(_obj_, sz, rot, pos, disp) {
				var _args = trans.parts.sz(_obj_, sz);
				_args = trans.parts.rot.x(_args, rot);
				_args = trans.parts.rot.y(_args, rot);
				_args = trans.parts.rot.z(_args, rot);
				_args = trans.parts.pos(_args, pos);
				_args = trans.pov.plane(_args);
				_args = trans.pov.theta(_args);
				_args = trans.pov.set(_args);
				_args = trans.persp(_args);
				_args = trans.disp(_args, disp);
				return _args;
			}
		};

		(function() {
			"use strict";
			var threeD = function(param) {
				this.transIn = {};
				this.transOut = {};
				this.transIn.vtx = (param.vtx);
				this.transIn.sz = (param.sz);
				this.transIn.rot = (param.rot);
				this.transIn.pos = (param.pos);
			};

			threeD.prototype.vupd = function() {
				this.transOut = trans.steps(

						this.transIn.vtx,
						this.transIn.sz,
						this.transIn.rot,
						this.transIn.pos,
						cam.disp
				);
			};

			var Build = function() {
				this.vel = 0.04;
				this.lim = 360;
				this.diff = 200;
				this.initPos = 100;
				this.toX = _x;
				this.toY = _y;
				this.go();
			};

			Build.prototype.go = function() {
				this.canvas = document.getElementById("canv");
				this.canvas.width = window.innerWidth;
				this.canvas.height = window.innerHeight;
				this.$ = canv.getContext("2d");
				this.$.globalCompositeOperation = 'source-over';
				this.varr = [];
				this.dist = [];
				this.calc = [];

				for (var i = 0, len = num; i < len; i++) {
					this.add();
				}

				this.rotObj = {
					x: 0,
					y: 0,
					z: 0
				};
				this.objSz = {
					x: w / 5,
					y: h / 5,
					z: w / 5
				};
			};

			Build.prototype.add = function() {
				this.varr.push(new threeD({
					vtx: {
						x: rnd(),
						y: rnd(),
						z: rnd()
					},
					sz: {
						x: 0,
						y: 0,
						z: 0
					},
					rot: {
						x: 20,
						y: -20,
						z: 0
					},
					pos: {
						x: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
						y: this.diff * Math.sin(360 * Math.random() * Math.PI / 180),
						z: this.diff * Math.sin(360 * Math.random() * Math.PI / 180)
					}
				}));
				this.calc.push({
					x: 360 * Math.random(),
					y: 360 * Math.random(),
					z: 360 * Math.random()
				});
			};

			Build.prototype.upd = function() {
				cam.obj.x += (this.toX - cam.obj.x) * 0.05;
				cam.obj.y += (this.toY - cam.obj.y) * 0.05;
			};

			Build.prototype.draw = function() {
				this.$.clearRect(0, 0, this.canvas.width, this.canvas.height);
				cam.upd();
				this.rotObj.x += 0.1;
				this.rotObj.y += 0.1;
				this.rotObj.z += 0.1;

				for (var i = 0; i < this.varr.length; i++) {
					for (var val in this.calc[i]) {
						if (this.calc[i].hasOwnProperty(val)) {
							this.calc[i][val] += this.vel;
							if (this.calc[i][val] > this.lim) this.calc[i][val] = 0;
						}
					}

					this.varr[i].transIn.pos = {
						x: this.diff * Math.cos(this.calc[i].x * Math.PI / 180),
						y: this.diff * Math.sin(this.calc[i].y * Math.PI / 180),
						z: this.diff * Math.sin(this.calc[i].z * Math.PI / 180)
					};
					this.varr[i].transIn.rot = this.rotObj;
					this.varr[i].transIn.sz = this.objSz;
					this.varr[i].vupd();
					if (this.varr[i].transOut.p < 0) continue;
					var g = this.$.createRadialGradient(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p, this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2);
					this.$.globalCompositeOperation = 'lighter';
					g.addColorStop(0, 'hsla(255, 255%, 255%, 1)');
					g.addColorStop(.5, 'hsla(' + (i + 2) + ',85%, 40%,1)');
					g.addColorStop(1, 'hsla(' + (i) + ',85%, 40%,.5)');
					this.$.fillStyle = g;
					this.$.beginPath();
					this.$.arc(this.varr[i].transOut.x, this.varr[i].transOut.y, this.varr[i].transOut.p * 2, 0, Math.PI * 2, false);
					this.$.fill();
					this.$.closePath();
				}
			};
			Build.prototype.anim = function() {
				window.requestAnimationFrame = (function() {
					return window.requestAnimationFrame ||
							function(callback, element) {
								window.setTimeout(callback, 1000 / 60);
							};
				})();
				var anim = function() {
					this.upd();
					this.draw();
					window.requestAnimationFrame(anim);

				}.bind(this);
				window.requestAnimationFrame(anim);
			};

			Build.prototype.run = function() {
				this.anim();

				window.addEventListener('mousemove', function(e) {
					this.toX = (e.clientX - this.canvas.width / 2) * -0.8;
					this.toY = (e.clientY - this.canvas.height / 2) * 0.8;
				}.bind(this));
				window.addEventListener('touchmove', function(e) {
					e.preventDefault();
					this.toX = (e.touches[0].clientX - this.canvas.width / 2) * -0.8;
					this.toY = (e.touches[0].clientY - this.canvas.height / 2) * 0.8;
				}.bind(this));
				window.addEventListener('mousedown', function(e) {
					for (var i = 0; i < 100; i++) {
						this.add();
					}
				}.bind(this));
				window.addEventListener('touchstart', function(e) {
					e.preventDefault();
					for (var i = 0; i < 100; i++) {
						this.add();
					}
				}.bind(this));
			};
			var app = new Build();
			app.run();
		})();
	</script>
	<script>
		
		// 设置倒计时
		var forgotPasswordSendTime = 60;
		var enterpriseRegisterTime = 60;
		var userUnlockTime = 60;
		var smsPhoneSendTime = 60;
		
		// 手机号码校验
		var regPhone = /^1\d{10}$/;
		// 强：字母+数字+特殊字符 8位以上
		var pwdStrong =  /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,30}$/;
		// 中：字母+数字，字母+特殊字符，数字+特殊字符
		var pwdAmid = /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;
		// 弱：纯数字，纯字母，纯特殊字符
		var pwdWeak = /^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/;
		// 校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串
		var patrn = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
		
		//Tab的切换功能，切换事件监听等，需要依赖element模块
		layui.use('element', function(){
			  var $ = layui.jquery
			  ,element = layui.element; 
			
			  
		});
		
		
		layui.use([ 'form' ], function() {
			var form = layui.form, layer = layui.layer, $ = layui.jquery;
			
			var pathname = window.location.pathname;
			console.log(pathname);
			var host = window.location.host;
			console.log(host);
			
			// 进行登录操作
			form.on('submit(login)', function(data) {
				console.log(data);
				data = data.field;
				if (data.captcha == '') {
					layer.msg('请输入验证码');
					return false;
				}
				if (data.username == '') {
					layer.msg('用户名不能为空');
					return false;
				}
				if (data.password == '') {
					layer.msg('密码不能为空');
					return false;
				}
				
				// alert("发送的数据："+Encrypt(JSON.stringify(data)));
				var _data = {
					captcha: Encrypt(data.captcha),
					password: Encrypt(data.password),
					username: Encrypt(data.username),	
				}
				
				$.ajax({
					type : 'POST',
					url : '/sys/user/login',
					dataType : "JSON",
					data : JSON.stringify(_data),
					contentType : "application/json",
					success : function(res) {
						if (res.code == 0) {
							layui.data('LocalData', {
								key : "access_token",
								value : res.data.accessToken
							})
							layer.msg('登录成功', {
								time : 1000
							}, function() {
								window.location = '/index/home?userId='+res.data.id+'&taxcode='+res.data.identityTaxorgCode+'&token='+res.data.accessToken;
								// window.location = '/index/home';

							});
						} else {
							 
							layer.msg(res.msg);
							// layer.msg("用户名或密码错误");
							$("#img").click();
						}
					}
				})

				return false;
			});
			
			form.on('submit(forgotPassword)', function(data) {
				data = data.field;
				if (data.forgotPasswordCaptcha == '') {
					layer.msg('验证码不能为空');
					return false;
				}
				
				if (data.forgotPasswordPhoneCaptcha == '') {
					layer.msg('手机验证码不能为空');
					return false;
				}
				
				if (data.forgotPasswordPhone == '') {
					layer.msg('手机号码不能为空');
					return false;
				}
				
				if (data.forgotPasswordUsername == '') {
					layer.msg('用户名不能为空');
					return false;
				}
				
				if (!pwdStrong.exec(data.forgotPasswordPassword)) {
					layer.msg('新密码不符合规范，规则：字母+数字+特殊字符、至少8位以上');
					return false;
				} 
				
				$.ajax({
					type : 'PUT',
					url : '/sys/user/forgetPwd',
					dataType : "JSON",
					data : JSON.stringify(data),
					contentType : "application/json",
					success : function(res) {
						if (res.code == 0) {
							layer.msg('密码修改成功', {
								time : 2000
							}, function() {
								window.location = '/login';
							});
						} else {
							layer.msg(res.msg);
							$("#forgotPasswordImg").click();
						}
					}
				})
				return false;
			});
			
			form.on('submit(enterpriseRegister)', function(data) {
				data = data.field;
				
				if (data.enterpriseRegisterCaptcha == '') {
					layer.msg('验证码不能为空');
					return false;
				}
				
				if (data.enterpriseRegisterPhoneCaptcha == '') {
					layer.msg('手机验证码不能为空');
					return false;
				}
				
				if (data.enterpriseRegisterPhone == '') {
					layer.msg('手机号码不能为空');
					return false;
				}
				
				
				if (!patrn.exec(data.enterpriseRegisterUsername)) {
					layer.msg('用户名不符合规范');
					return false;
				}
				
				if (!pwdStrong.exec(data.enterpriseRegisterPassword)) {
					layer.msg('密码不符合规范，规则：字母+数字+特殊字符、至少8位以上');
					return false;
				}
				
				if (data.enterpriseRegisterContactperson == '') {
					layer.msg('联系人不能空');
					return false;
				}
				
				if (data.enterpriseRegisterTaxcode == '') {
					layer.msg('社会信用代码不能空');
					return false;
				}
				
				if (data.enterpriseRegisterTaxname == '') {
					layer.msg('企业名称');
					return false;
				}
				
				$.ajax({
					type : 'POST',
					url : '/sys/user/enterpriseRegister',
					dataType : "JSON",
					data : JSON.stringify(data),
					contentType : "application/json",
					success : function(res) {
						if (res.code == 0) {
							layer.msg('企业端注册成功，请登录进行平台签约！', {
								time : 2000
							}, function() {
								window.location = '/login';
							});
						} else {
							layer.msg(res.msg);
							$("#enterpriseRegisterImg").click();
						}
					}
				})
				return false;
			});
			
			form.on('submit(userUnlock)', function(data) {
				data = data.field;
				
				if (data.userUnlockCaptcha == '') {
					layer.msg('验证码不能为空');
					return false;
				}
				
				if (data.userUnlockPhoneCaptcha == '') {
					layer.msg('手机验证码不能为空');
					return false;
				}
				
				if (data.userUnlockPhone == '') {
					layer.msg('手机号码不能为空');
					return false;
				}
				
				
				if (data.userUnlockUsername == '') {
					layer.msg('用户名不能为空');
					return false;
				}
				
				$.ajax({
					type : 'PUT',
					url : '/sys/user/userUnlock',
					dataType : "JSON",
					data : JSON.stringify(data),
					contentType : "application/json",
					success : function(res) {
						if (res.code == 0) {
							layer.msg('解锁成功', {
								time : 2000
							}, function() {
								window.location = '/login';
							});
						} else {
							layer.msg(res.msg);
							$("#userUnlockImg").click();
						}
					}
				})
				return false;
			});			
			
			
		});
		
		function about(){
			//window.location.href="/index/about.html";
			window.open("/index/about.html");
		}
	</script>
</body>
</html>
